<template>
  <div class="editor-toolbar">
    <div class="toolbar-left">
      <el-button-group>
        <el-button
          :type="editMode === 'visual' ? 'primary' : 'default'"
          @click="handleChangeMode('visual')"
        >
          <el-icon><Grid /></el-icon>
          可视化编辑
        </el-button>
        <el-button
          :type="editMode === 'yaml' ? 'primary' : 'default'"
          @click="handleChangeMode('yaml')"
        >
          <el-icon><DocumentCopy /></el-icon>
          YAML编辑
        </el-button>
      </el-button-group>
    </div>

    <div class="toolbar-center">
      <el-button @click="handleValidate">
        <el-icon><CircleCheck /></el-icon>
        校验
      </el-button>
      <el-button @click="handleClear">
        <el-icon><Delete /></el-icon>
        清空
      </el-button>
      <el-button @click="handleZoomIn">
        <el-icon><ZoomIn /></el-icon>
      </el-button>
      <el-button @click="handleZoomOut">
        <el-icon><ZoomOut /></el-icon>
      </el-button>
      <el-button @click="handleFitView">
        <el-icon><FullScreen /></el-icon>
        适应画布
      </el-button>
    </div>

    <div class="toolbar-right">
      <el-button @click="handleExport">
        <el-icon><Download /></el-icon>
        导出
      </el-button>
      <el-button @click="handleImport">
        <el-icon><Upload /></el-icon>
        导入
      </el-button>
      <el-button type="primary" @click="handleSave">
        <el-icon><Select /></el-icon>
        {{ saveButtonText }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  editMode: {
    type: String,
    default: 'visual'
  },
  saveButtonText: {
    type: String,
    default: '保存'
  }
})

const emit = defineEmits([
  'change-mode',
  'validate',
  'clear',
  'zoom-in',
  'zoom-out',
  'fit-view',
  'export',
  'import',
  'save'
])

const handleChangeMode = (mode) => {
  emit('change-mode', mode)
}

const handleValidate = () => {
  emit('validate')
}

const handleClear = () => {
  emit('clear')
}

const handleZoomIn = () => {
  emit('zoom-in')
}

const handleZoomOut = () => {
  emit('zoom-out')
}

const handleFitView = () => {
  emit('fit-view')
}

const handleExport = () => {
  emit('export')
}

const handleImport = () => {
  emit('import')
}

const handleSave = () => {
  emit('save')
}
</script>

<style lang="scss" scoped>
.editor-toolbar {
  height: 56px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 16px;

  .toolbar-left,
  .toolbar-center,
  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .toolbar-center {
    flex: 1;
    justify-content: center;
  }
}
</style>
